<template>
	<view class="content">
		<view class="top-bar">
			<view class="search-div">
				<image class="search-img" src="../../static/images/search/search.png" mode=""></image>
				<input type="search" placeholder="搜索用户/群" class="search" placeholder-style="color:#aaa;font-weight:400;" v-model="search"
				 value="" />
			</view>
			<view class="top-bar-right">
				<view class="text" @click="toSignUp">取消</view>
			</view>
		</view>
		<view class="main">
			<view class="search-user result">
				<view class="title">用户</view>
				<view class="list-user " v-for="item in handleInput">
					<view class="right-btn send">发送</view>
					<image src="../../static/images/img/four.png" mode=""></image>
					<view class="names">
						<view class="name">{{item.name}}</view>
						<view class="email">{{item.email}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import datas from '../../commons/js/datas.js';
	export default {
		data() {
			return {
				search: '',
			}
		},
		computed:{
			handleInput:function(){
                    var search = this.search;
                    var searchVal = '';//搜索后的数据
					var product = datas.friends()
					// console.log(product)
					if(search){
                        searchVal = product.filter(function (product) {
                            return Object.keys(product).some(function (key) {
                                return String(product[key]).toLowerCase().indexOf(search) > -1;
                            })
                        })
                        return searchVal;
                    }
			}
		},
		methods: {
		}
	}
</script>

<style lang="scss">
	@import "../../commons/css/index.scss";

	.top-bar {
		.search-div {
			position: absolute;
			top: 0rpx;
			left: 0rpx;
			width: 100%;
			float: left;
			z-index: -1;
			padding: 14rpx 118rpx 14rpx $uni-spacing-col-base;

		}

		.search {
			box-sizing: border-box;
			padding: 0 60rpx 0 12rpx;
			width: 600rpx;
			height: 60rpx;
			background: $uni-bg-color-grey;
			border-radius: 10rpx;
		}

		.search-img {
			width: 40rpx;
			height: 40rpx;
			position: absolute;
			top: 22rpx;
			left: 560rpx;
			z-index: 10;
		}

	}

	.main {
		padding: 88rpx $uni-spacing-col-base;
		width: 100%;

		.result {
			padding-top: $uni-spacing-col-base;

			.title {
				padding-left: 20rpx;
				font-size: 44rpx;
				font-weight: 600;
				line-height: 60rpx;
				color: $uni-text-color;
			}

			.list-user {
				box-sizing: border-box;
				height: 120rpx;
				width: 100%;
				// border: 1px solid red;
				padding-top: 20rpx;
				padding-left: 20rpx;
				padding-right: 20rpx;

				image {
					float: left;
					width: 80rpx;
					height: 80rpx;
					border-radius: $uni-border-radius-base;
				}
			}

			.names {
				float: left;
				padding-left: $uni-border-radius-base;
			}

			.name {
				font-size: 36rpx;
				color: $uni-text-color;
				line-height: 50rpx;
			}

			.email {
				font-size: $uni-font-size-sm;
				color: $uni-text-color;
				line-height: 28rpx;
				text-align: left;
			}

			.right-btn {
				float: right;
				width: 120rpx;
				height: 48rpx;
				border-radius: $uni-border-radius-base;
				line-height: 48rpx;
				text-align: center;
				font-size: 24rpx;
				margin-top: 16rpx;
			}

			.send {
				background: $uni-color-primary;
				color: $uni-text-color;

			}

			.add {
				background: rgba(74, 170, 255, 0.1);
				color: $uni-color-success;
			}
		}
	}
</style>
